<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .item_bock {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height:94px;
      width: 300px;
      padding:0px 24px 0px 38px;
      border-bottom: 1px solid #f7f7f7;
      background: #fff;
    }
    .head_p {
      height:132px;
    }
    .head_img{
      height: 90px;
    }
    .head_img img{
      width:90px;
      height:90px;
      border-radius:50px
    }
    .setting_right{
      display: flex;
      height: 37px;
      justify-content: flex-end;
      align-items: center;
    }
    .hiddenInput{
      display: none;
    }
    .tx {
      padding: 4px 24px !important;
      color: #fff;
      background-color: #f0ad4e;
      border-color: #eea236;
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
  </style>
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/main.js"></script>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div id="app">
  <!--div class="item_bock head_p">
    <div class="head_img">
      <img :src="userInfo.avatar"/>
    </div>
    <div class="setting_right" @click.stop="uploadHeadImg">
    &lt;!&ndash; <div class="caption ">更改头像</div>&ndash;&gt;
      <input type="button" class="tx" value="选择图片">
    </div>
    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" class="tx" @click="submit()" value="提交修改">

  </div>
  <a href="javascript:void(0)" style="text-decoration: none;color: #35b558" @click="download()" style="cursor: pointer">下载文件</a>-->
</div>

</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      userInfo: {
        avatar: 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg'
      }
      // 初始图片
    },
    methods: {
      download:function () {
        $('#ifAttach').attr('src', server.ip + '/book/downloadOnlineLearnMaterials2.json?fileName=仙逆.txt');
      },


      // 打开图片上传
      uploadHeadImg: function () {
        this.$el.querySelector('.hiddenInput').click()
      },
      // 将头像显示
      handleFile: function (e) {
        var $target = e.target || e.srcElement
        var file = $target.files[0]
        var reader = new FileReader()
        reader.onload = (data) => {
          var res = data.target || data.srcElement
          this.userInfo.avatar = res.result
         //base64
        }
        reader.readAsDataURL(file)
      },
      submit:function () {
        var that=this;
        axios.post(server.ip+'/attach/upload.json', {url:that.userInfo.avatar})
          .then(function (r) {
          })
      }
    },
    mounted :function () {
      var that=this;
      var fileName=window.location.href.split("=")[1];//链接跳转获取模板
      $('#ifAttach').attr('src', server.ip + '/book/downloadOnlineLearnMaterials.json?fileName='+fileName);
    }
  })
</script>
</html>
